<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WEB 服务器</title>
  <link rel="preload" href="css/fonts/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="css/lib/bootstrap.css">
  <link rel="stylesheet" href="css/lib/font-awesome.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app-loading">
    <div class="bar">
      <i class="sphere"></i>
    </div>
  </div>
  <div id="app-main"></div>
  <!-- templates -->
  <script type="text/template" id="login-tmpl">
    <div style="padding: 40px 0; min-height: 650px">
      <form id="form-login">
        <h1 class="h3 mb-3 font-weight-normal">登录</h1>
        <div class="mb-3">
          <label for="username" class="sr-only">Username</label>
          <input id="username" type="text" class="form-control" placeholder="用户名" required autofocus autocomplete="off">
          <label for="password" class="sr-only">Password</label>
          <input id="password" type="password" class="form-control" placeholder="密码" required autocomplete="current-password">
        </div>
        <button id="submit" class="btn btn-lg btn-dark btn-block" type="submit">登录</button>
      </form>
    </div>
  </script>
  <script type="text/template" id="manager-tmpl">
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
      <a class="navbar-brand col-sm-3 col-md-2 mr-0 div-trigger" href="#">管理系统</a>
      <ul class="navbar-nav col-sm-9 col-md-10 justify-content-end px-3" style="flex-direction: row">
        <li class="nav-item text-nowrap">
          <a id="user-anchor" data-role="route-anchor" class="nav-link div-trigger" href="#user">
            <span data-feather="user"></span>
            <%= username %>
          </a>
        </li>
        <li class="nav-item text-nowrap">
          <a type="submit" id="logout" class="nav-link div-trigger" href="#">
            退出
            <span data-feather="log-out"></span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="container-fluid">
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a id="home-anchor" data-role="route-anchor" class="nav-link div-trigger" href="#">
                  <span data-feather="home"></span>
                  首页
                </a>
              </li>
              <li class="nav-item">
                <a id="reports-anchor" data-role="route-anchor" class="nav-link div-trigger" href="#reports">
                  <span data-feather="bar-chart-2"></span>
                  报告
                </a>
              </li>
              <li class="nav-item">
                <a id="logs-anchor" data-role="route-anchor" class="nav-link div-trigger" href="#logs">
                  <span data-feather="file-text"></span>
                  日志
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
          <section id="container"></section>
        </main>
      </div>
    </div>
  </script>
  <script type="text/template" id="home-tmpl">
    <div class="pt-3 pb-2 mb-3 border-bottom">
      <h2>首页</h2>
    </div>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
      <h3>应用</h3>
      <div class="btn-toolbar mb-2 mb-md-0">
        <button id="rf-apps" type="button" class="btn btn-sm btn-outline-secondary">
          <i class="fa fa-rotate-right"></i>
          刷新
        </button>
      </div>
    </div>
    <table id="app-table" class="table table-dark table-striped">
      <thead>
        <tr>
          <th>路径</th>
          <th>名称</th>
          <th>运行</th>
          <th>会话</th>
          <th>功能</th>
        </tr>
      </thead>
      <tbody>
        <% apps.forEach(function(app) { %>
        <tr>
          <td><div data-role="display-path"><a href="<%= app.path %>" target="_blank">/<%= app.path %></a></div></td>
          <td><div data-role="display-name"><%= app.name %></div></td>
          <td><div data-role="display-state"><%= app.isRunning %></div></td>
          <td><div data-role="display-sessions"><%= app.sessionNum %></div></td>
          <td>
            <div class="form-inline">
              <% if (app.name != 'manager') { %>
              <% if (app.isRunning === 'false') { %>
              <button data-role="start-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">启动</button>
              <% } %>
              <% if (app.isRunning === 'true') { %>
              <button data-role="stop-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">停止</button>
              <% } %>
              <button data-role="reload-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">重载</button>
              <button data-role="remove-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">卸载</button>
              <% } %>
              <div class="input-group mr-1">
                <div class="input-group-prepend">
                  <button data-role="expire-sessions" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm">移除会话，空闲时间 ≥</button>
                </div>
                <input type="number" min="0" class="form-control form-control-sm" style="width: 60px" value="30">
              </div>
              分钟
            </div>
          </td>
        </tr>
        <% }); %>
      </tbody>
    </table>
    <form id="add-app" class="pb-3" enctype="multipart/form-data">
      <fieldset>
        <div class="form-row align-items-center" style="margin-left: 0">
          <div class="custom-file col-sm-3">
            <input type="file" name="file" id="app-zip" class="custom-file-input" style="width: 0">
            <label class="custom-file-label" for="app-zip">应用打包文件（zip格式）</label>
          </div>
          <div class="col-sm-1">
            <button id="add-app-submit" class="btn btn-sm btn-outline-secondary btn-block" type="submit">添加应用</button>
          </div>
        </div>
      </fieldset>
      <progress value="0" max="100" class="col-sm-4" style="opacity: 0"></progress>
    </form>
    <div class="pr-1" style="flex: 1 0 0">
      <div class="pt-3 pb-2 mb-3">
        <h3>服务器信息</h3>
      </div>
      <table class="table">
        <tr>
          <th>JVM 版本</th>
          <td><%= serverInfo.jvmVersion %></td>
        </tr>
        <tr>
          <th>JVM 厂商</th>
          <td><%= serverInfo.jvmVendor %></td>
        </tr>
        <tr>
          <th>操作系统名称</th>
          <td><%= serverInfo.osName %></td>
        </tr>
        <tr>
          <th>操作系统版本</th>
          <td><%= serverInfo.osVersion %></td>
        </tr>
        <tr>
          <th>操作系统架构</th>
          <td><%= serverInfo.osArchitecture %></td>
        </tr>
        <tr>
          <th>主机名称</th>
          <td><%= serverInfo.hostname %></td>
        </tr>
        <tr>
          <th>IP 地址</th>
          <td><%= serverInfo.ipAddress %></td>
        </tr>
      </table>
    </div>
    <div class="pl-1" style="flex: 1 0 0">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h3>
          内存
          <small data-role="rf-memory-info" class="text-muted" style="font-size: .5em">每 5 秒自动刷新</small>
        </h3>
        <div class="btn-toolbar mb-2 mb-md-0">
          <button data-role="pause-rf-memory" type="button" class="btn btn-sm btn-outline-secondary" title="暂停">
            <i class="fa fa-pause"></i>
          </button>
        </div>
      </div>
      <div class="d-flex justify-content-center">
        <canvas id="runtimeChart"></canvas>
      </div>
    </div>
  </script>
  <script type="text/template" id="apps-tmpl">
    <% apps.forEach(function(app) { %>
    <tr>
      <td><div data-role="display-path"><a href="/<%= app.path %>/" target="_blank">/<%= app.path %></a></div></td>
      <td><div data-role="display-name"><%= app.name %></div></td>
      <td><div data-role="display-state"><%= app.isRunning %></div></td>
      <td><div data-role="display-sessions"><%= app.sessionNum %></div></td>
      <td>
        <div class="form-inline">
          <% if (app.name != 'manager') { %>
          <% if (app.isRunning === 'false') { %>
          <button data-role="start-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">启动</button>
          <% } %>
          <% if (app.isRunning === 'true') { %>
          <button data-role="stop-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">停止</button>
          <% } %>
          <button data-role="reload-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">重载</button>
          <button data-role="remove-app" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm mr-1">卸载</button>
          <% } %>
          <div class="input-group mr-1">
            <div class="input-group-prepend">
              <button data-role="expire-sessions" data-app-path="<%= app.path%>" type="button" class="btn btn-light btn-sm">移除会话，空闲时间 ≥</button>
            </div>
            <input type="number" min="0" class="form-control form-control-sm" style="width: 60px" value="30">
          </div>
          分钟
        </div>
      </td>
    </tr>
    <% }); %>
  </script>
  <script type="text/template" id="reports-tmpl">
    <div class="pt-3 pb-2 mb-3 border-bottom">
      <h2>报告</h2>
    </div>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
      <h3>应用</h3>
      <div class="btn-toolbar mb-2 mb-md-0">
        <button id="rf-reports" type="button" class="btn btn-sm btn-outline-secondary div-trigger">
          <i class="fa fa-rotate-right"></i>
          刷新
        </button>
      </div>
    </div>
    <div id="report-list">
      <% reports.forEach(function(report) { %>
      <div class="mb-5">
        <h4>/<%= report.path %></h4>
        <table class="table">
          <tr>
            <th>Start time</th>
            <td><%= report.startTime %></td>
          </tr>
          <tr>
            <th>Startup time</th>
            <td><%= report.startupTime %> ms</td>
          </tr>
          <tr>
            <th>Active sessions</th>
            <td><%= report.activeSessions %></td>
          </tr>
          <tr>
            <th>Session count</th>
            <td><%= report.sessionCount %></td>
          </tr>
          <tr>
            <th>Max active sessions</th>
            <td><%= report.maxActiveSessions %></td>
          </tr>
          <tr>
            <th>Rejected session creations</th>
            <td><%= report.rejectedSessionCreations %></td>
          </tr>
          <tr>
            <th>Expired sessions</th>
            <td><%= report.expiredSessions %></td>
          </tr>
          <tr>
            <th>Longest session alive time</th>
            <td><%= report.longestSessionAliveTime %> s</td>
          </tr>
          <tr>
            <th>Average session alive time</th>
            <td><%= report.averageSessionAliveTime %> s</td>
          </tr>
          <tr>
            <th>Processing time</th>
            <td><%= report.processingTime %> ms</td>
          </tr>
        </table>
      </div>
      <% }); %>
    </div>
  </script>
  <script type="text/template" id="user-tmpl">
    <div class="pt-3 pb-2 mb-3 border-bottom">
      <h2><%= username %></h2>
    </div>
    <div class="pt-3 pb-2 mb-3 border-bottom">
      <h3>修改密码</h3>
    </div>
    <div id="change-password">
      <div class="alert alert-warning" role="alert">
        <span data-feather="alert-circle"></span>
        密码修改后将退出系统
      </div>
      <form id="change-password-form" novalidate>
        <div class="pwd-input-container mb-3">
          <input type="password" id="password" class="form-control" placeholder="当前密码" required autocomplete="current-password">
          <div class="invalid-feedback">
            请输入当前密码
          </div>
          <span data-role="show-password" data-feather="eye-off" class="pwd-toggle"></span>
        </div>
        <div class="pwd-input-container mb-3">
          <input type="password" id="new-password" class="form-control" placeholder="新密码" required autocomplete="new-password">
          <div class="invalid-feedback">
            请输入新密码
          </div>
          <span data-role="show-password" data-feather="eye-off" class="pwd-toggle"></span>
        </div>
        <div class="pwd-input-container mb-3">
          <input type="password" id="new-password-again" class="form-control" placeholder="再次输入新密码" required autocomplete="new-password">
          <div class="invalid-feedback">
            请再次输入新密码
          </div>
          <span data-role="show-password" data-feather="eye-off" class="pwd-toggle"></span>
        </div>
        <div>
          <button id="submit" type="submit" class="btn btn-dark btn-block">提交</button>
        </div>
      </form>
    </div>
  </script>
  <script type="text/template" id="not-found-tmpl">
    <div style="display: flex; min-height: 600px">
      <div style="margin: auto; text-align: center; font-size: 2rem">
        404 找不到页面
      </div>
    </div>
  </script>
  <!-- /templates -->
  <script src="js/lib/jquery-3.4.1.js"></script>
  <script src="js/lib/chart.js"></script>
  <script src="js/lib/popper.js"></script>
  <script src="js/lib/bootstrap.js"></script>
  <script src="js/lib/bs-custom-file-input.js"></script>
  <script src="js/lib/underscore.js"></script>
  <script src="js/lib/feather.js"></script>
  <script src="js/app.js"></script>
</body>
</html>